<div nz-row>
    <div nz-col nzSpan="12">
        <h1 *ngIf="!configId">新建配置</h1>
        <h1 *ngIf="configId">编辑配置</h1>
    </div>
</div>
<nz-spin [nzSpinning]="isSpinning">

    <div nz-row>
        <div nz-col nzSpan="24">
            <form nz-form [formGroup]="form" (ngSubmit)="submitForm()">

                <nz-form-item>
                    <nz-form-control nzSpan="6">
                        <nz-input-group>
                            <input type="text" nz-input formControlName="configName" placeholder="请输入配置名" trim="blur"
                                   nz-tooltip nzTooltipPlacement="right" nzTitle="配置名" autofocus/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item nz-row class="register-area">
                    <nz-form-control [nzSpan]="14">
                        <button nz-button nzType="primary">保存</button>
                        <nz-divider nzType="vertical"></nz-divider>
                        <button nz-button type="button" nzType="primary" (click)="format = !format;formatChange()">切换模式
                        </button>
                        <ng-container *ngIf="!format">
                            <nz-divider nzType="vertical"></nz-divider>
                            <button nz-button type="button" nzType="primary" (click)="addProperty()">添加属性</button>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </div>
    </div>
    <div nz-row *ngIf="!format">
        <div nz-col nzSpan="24">
            <form nz-form [formGroup]="form" (ngSubmit)="submitForm()">
                <ng-container>
                    <nz-form-item *ngFor="let item of propertyList.controls; let i=index">
                        <ng-container [formGroup]="item">
                            <nz-form-label nzSpan="1">Key</nz-form-label>
                            <nz-form-control nzSpan="6">
                                <input nz-input placeholder="Key" formControlName="propertyKey"/>
                            </nz-form-control>

                            <nz-form-label nzSpan="1">Value</nz-form-label>
                            <nz-form-control nzSpan="6">
                                <input nz-input placeholder="Value" formControlName="propertyValue"/>
                            </nz-form-control>

                            <div nz-col nzSpan="1" class="property-icon" (click)="remove(i)">
                                <i nz-icon nzType="minus-circle" nzTheme="twotone"></i>
                            </div>
                        </ng-container>
                    </nz-form-item>
                </ng-container>
            </form>
        </div>
    </div>
    <div nz-row *ngIf="format">
        <div nz-col nzSpan="17">
            <textarea nz-input [nzAutosize]="{ minRows: 10, maxRows: 20 }" [(ngModel)]="propertyText">    </textarea>
        </div>
    </div>
</nz-spin>
